<template>
	<view>
		<view class="title">{{infoObj.newsMap.title}}</view>
		<view class="plate">
			<view class="p-date">发布时间：{{infoObj.newsMap.addTimeNow}}</view>
			<view class="p-type">编辑：{{infoObj.newsMap.newsTypeName}}</view>
			<view class="p-views">浏览：{{infoObj.newsMap.views}}</view>
		</view>
		<rich-text :nodes="infoObj.newsMap.content" class="content"></rich-text>
		<view class="label aclear" v-if="infoObj.newsMap.caseTypeName">
			<navigator :url="infoObj.newsMap.caseTypeUrl" class="l-a">{{infoObj.newsMap.caseTypeName}}</navigator>
		</view>
		<view class="pages">
			<navigator class="p-list" v-if="infoObj.previousPageNewsMap" :url="infoObj.previousPageNewsMap.url" hover-class="none">
				<image :src="infoObj.previousPageNewsMap.images" mode="aspectFill" class="pl-cover"></image>
				<view class="pl-item">
					<view class="pli-text">上一篇</view>
					<view class="pli-title">{{infoObj.previousPageNewsMap.title}}</view>
				</view>
			</navigator>
			<navigator class="p-list" v-if="infoObj.nextPageNewsMap" :url="infoObj.nextPageNewsMap.url" hover-class="none">
				<image :src="infoObj.nextPageNewsMap.images" mode="aspectFill" class="pl-cover"></image>
				<view class="pl-item">
					<view class="pli-text">下一篇</view>
					<view class="pli-title">{{infoObj.nextPageNewsMap.title}}</view>
				</view>
			</navigator>
		</view>
		<Footers></Footers>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				infoObj: {
					newsMap: {
						addTime: '',
						caseTypeAliases: '',
						caseTypeName: '',
						content: '',
						id: '',
						newsType: '',
						newsTypeAliases: '',
						newsTypeName: '',
						subtitle: '',
						title: '',
						views: 0
					},
					previousPageNewsMap: null,
					nextPageNewsMap: null
				}
			}
		},
		onLoad(option) {
			this.id = option.id || ''
		},
		onShow() {
			this.getInfoFn()
		},
		methods: {
			// 获取新闻详情
			async getInfoFn() {
				let getInfo = await this.u.http({
					url: this.u.queryNewsById,
					data: {
						id: this.id
					}
				})
				if (getInfo.code == 200 && getInfo.data) {
					getInfo.data.newsMap.addTimeNow = this.u.formatTime(getInfo.data.newsMap.addTime, 'Y-m-d')
					getInfo.data.newsMap.content = getInfo.data.newsMap.content.replace(/<img/gi, '<img style="width: 100%;"')
					getInfo.data.previousPageNewsMap.url = `/pages/xwzxxq?id=${getInfo.data.previousPageNewsMap.id}`
					getInfo.data.nextPageNewsMap.url = `/pages/xwzxxq?id=${getInfo.data.nextPageNewsMap.id}`
					getInfo.data.newsMap.caseTypeUrl = `/pages/khal?type=${getInfo.data.newsMap.caseTypeAliases}`
					this.infoObj = getInfo.data
					uni.setNavigationBarTitle({
						title: getInfo.data.newsMap.title
					})
					// 设置TDK
					if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
						swan.setPageInfo({
							title: `${getInfo.data.newsMap.title}-纺扬网站建设`,
							description: '',
							keywords: '网站制作,网站开发,网站设计,纺扬网站建设',
							articleTitle: getInfo.data.newsMap.title
						})
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/css/color.less");

	.title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 39rpx 24rpx 0;
	}
	
	.plate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-top: 29rpx;
		
		.p-date, .p-type, .p-views {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.content {
		width: 100%;
		padding: 58rpx 24rpx;
		box-sizing: border-box;
		display: block;
		overflow: hidden;
	}
	
	.label {
		padding: 0 24rpx 40rpx 24rpx;
		
		.l-a {
			float: left;
			padding: 0 20rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: @color-orange;
			color: #fff;
			border-radius: 4rpx;
			font-size: 22rpx;
		}
	}
	
	.pages {
		display: flex;
		align-items: stretch;
		margin-bottom: 58rpx;
		padding: 0 0 0 24rpx;
		
		.p-list {
			margin-right: 24rpx;
			flex: 50% 0;
			display: flex;
			align-items: stretch;
			overflow: hidden;
			
			.pl-cover {
				width: 118rpx;
				height: 88rpx;
				margin-right: 10rpx;
			}
			
			.pl-item {
				flex: 1;
				overflow: hidden;
				display: grid;
				align-content: space-between;
				
				.pli-text {
					font-size: 30rpx;
				}
				
				.pli-title {
					font-size: 22rpx;
					color: #999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>
